<template>
  <div style="height: 4000px">
    <el-card class="box-card">
      <span><i class="iconfont icon-dingdan1 icon"> </i>产品分类数据列表</span>
      <el-button
        style="float: right; padding: 3px"
        type="primary"
        @click="goCateAdd"
        >添加</el-button
      >
      <el-button
        style="float: right; padding: 3px"
        type="primary"
        @click="goBack"
        v-if="parentId != 0"
        >返回一级分类</el-button
      >
    </el-card>
    <el-table
      class="list"
      :data="cateList"
      border
      style="width: 100%"
      align="center"
    >
      <el-table-column prop="id" label="编号" width="100"> </el-table-column>
      <el-table-column label="分类名称" prop="name"> </el-table-column>
      <el-table-column label="级别">
        <template slot-scope="scope">
          {{ scope.row.level | jibieFilter }}
        </template>
      </el-table-column>
      <el-table-column label="商品数量" prop="product_count"> </el-table-column>
      <el-table-column label="数量单位" prop="product_unit"> </el-table-column>
      <el-table-column label="是否显示" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.show_status"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort"> </el-table-column>
      <el-table-column label="设置" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleShowNextLevel(scope.row)"
            :disabled="parentId != 0 ? true : false"
            >查看下级</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="goUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--2.分页的标签-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-sizes="[2, 3, 5]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入分类数据
import { fetchProductCateByParent } from "@/api/product";
export default {
  name: "productCate",
  data: function() {
    return {
      cateList: [],
      //1.分页的数据
      listQuery: {
        //key的名称和后台的接收名称是一致的，不能改
        pageNum: 1, //页码，默认是第一页
        pageSize: 5, //每页显示的数量
      },
      total: 0, //数据的总条数
      parentId: 0, //父级id号
    };
  },
  mounted: function() {
    //调用获取数据的函数
    this.getCateList(this.parentId);
  },
  //watch
  watch: {
    $route() {
      console.log("路由变化了");
      // 获取数据
      this.getCateList(this.parentId);
    },
  },
  filters: {
    //级别过滤器
    jibieFilter: function(value) {
      if (value == 0) {
        return "一级";
      } else {
        return "二级";
      }
    },
  },

  methods: {
    //3.写对应的函数
    handleSizeChange: function(value) {
      console.log("每页的数据发生变化时");
      this.listQuery.pageSize = value;
      this.listQuery.pageNum = 1;
      this.getCateList(this.parentId);
    },
    handleCurrentChange: function(value) {
      console.log("当前页发生变化时");
      this.listQuery.pageNum = value;
      this.getCateList(this.parentId);
    },
    //4.需要封装获取数据的函数
    getCateList: function(id) {
      console.log(id);
      //一级分类信息
      fetchProductCateByParent(id, this.listQuery).then((res) => {
        console.log(res);
        this.cateList = res.data;
        this.total = res.total;
      });
    },
    //查看下一级的函数
    handleShowNextLevel: function(row) {
      console.log("查看下一级的函数触发了", row);
      //parentId  赋值
      this.parentId = row.id;
      //跳转到parentId 是非零值得页面
      this.$router.push({
        path: "/pms/productCate",
        query: { parentId: this.parentId },
      });
    },

    //跳转到添加页面
    goCateAdd: function() {
      this.$router.push("/pms/addproductCate");
    },
    //跳转到修改页面
    goUpdate: function(row) {
      this.$router.push({
        path: "/pms/productcateupdate",
        query: { id: row.id },
      });
    },

    //删除分类数据
    handleDelete: function(row) {
      console.log("删除", row);
    },
    goBack() {
      this.parentId = 0;
      this.$router.push({
        path: "/pms/productCate",
      });
    },
  },
};
</script>

<style></style>
